<@override name="content">

<div class="pagination pagination-centered">
  <div class="pull-left">
    <a href="notice" class="btn btn-success">Notice List</a>
    <#if user??>
      <a href="" class="btn btn-primary" data-toggle="modal" data-target="#postModal">Post new topic</a>
    <#else>
      <a href="" class="btn btn-info" id="postBtn" data-toggle="modal" data-target="#loginModal">Post new topic</a>
    </#if>
  </div>
  <#include "../common/_paginate.html" />
  <@paginate currentPage=threadList.pageNumber totalPage=threadList.totalPage actionUrl="discuss/" />
  <div class="pull-right">
    <span class="badge badge-info">${threadList.pageNumber}/${threadList.totalPage} Pages</span>
    <span class="badge badge-info">${threadList.totalRow} Threads</span>
  </div>
</div>
<div class="row" style="margin-left: -20px; margin-right: 10px">
  <#if topicList??>
    <#assign prevDeep = 1>
    <div id="tree">
    <ul>
      <#list topicList as topic>
        <#assign deep = deepTree.get(topic.id)>
        <#assign parentDeep = deepTree.get(topic.parentId)>
        <#if (deep > prevDeep)>
        <ul>
        <#elseif (deep < prevDeep)>
          </li>
          <#list prevDeep-1..deep as i>
          </ul>
            </li>
          </#list>
        <#elseif prevDeep==parentDeep>
          </li>
        </#if>
      <li class="node" data-id="${topic.id}" data-deep="${deep}">
        <i class="topic topic-open"></i>
        <a href="javascript:void(${topic.id});" class="topic-title" data-id="${topic.id}">${topic.title}</a>
        Post by <a href="user/profile/${topic.name}">${topic.name}</a>
        At <span class="timestamp" data="${topic.ctime}"></span>
        <#if (deep==1 && topic.pid?? && topic.pid>0)>
          For <a href="problem/show/${topic.pid}">Problem ${topic.pid}</a>
        </#if>
        <#assign prevDeep=deep>
      </#list>
    </li>
      <#if (prevDeep>1)>
        <#list prevDeep-1..1 as i>
        </ul>
          </li>
        </#list>
      </#if>
      </ul>
    </div>
  </#if>
</div>

<div class="modal hide fade discussModal" id="postModal">
  <form class="topicForm" id="newThread" action="discuss/save" method="post">
    <div class="modal-header">
      <button class="close" aria-hidden="true" data-dismiss="modal" type="button">×</button>
      <h3 id="postModalLabel">Post new topic</h3>
    </div>
    <div class="modal-body">
      <div class="control-group">
        <div class="controls">
          <input type="text" id="inputTitle" class="input-xxlarge" name="topic.title" maxlength="64" placeholder="Title"
                 autofocus required>
        </div>
        <div class="controls">
          <input type="number" class="input-small" id="inputProblem" name="topic.pid" min="1000" value="${pid!}"
                 placeholder="Problem ID">
          <span class="help-inline" id="problemTitle"></span>
        </div>
        <div class="controls">
          <textarea id="inputContent" name="topic.content" maxlength="30000" placeholder="Enter your content here"
                    required></textarea>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <div class="pull-left">
        <p class="text-error" id="error"></p>
      </div>
      <button type="submit" class="btn btn-primary">Post</button>
      <button type="reset" class="btn btn-info">Reset</button>
      <button class="btn" data-dismiss="modal" accesskey="x">Cancel</button>
    </div>
  </form>
</div>

<div class="modal hide fade discussModal" id="topicModal">
  <form class="topicForm" id="newTopic" action="discuss/save" method="post">
    <div class="modal-header">
      <button class="close" aria-hidden="true" data-dismiss="modal" type="button">×</button>
      <h3 id="topicModalLabel">
        <span id="title"></span>
      </h3>
    </div>
    <div class="modal-body">
      <div id="content">
        <img src="assets/images/ajax-loader.gif" alt="loading"/> Loading...
      </div>
      <div>
        <input type="hidden" id="topicProblem" name="topic.pid">
        <input type="hidden" id="topicThreadId" name="topic.threadId">
        <input type="hidden" id="topicParentId" name="topic.parentId">
        <input type="text" id="topicTitle" class="input-xxlarge" name="topic.title" maxlength="64" placeholder="Title"
               autofocus required>
        <textarea id="topicContent" name="topic.content" maxlength="30000" placeholder="Enter your content here"
                  required></textarea>
        <div class="pull-left">
          <p class="text-error" id="topic-error"></p>
        </div>
        <div class="pull-right">
          <button type="submit" class="btn btn-primary">Post</button>
          <button class="btn" data-dismiss="modal" accesskey="x">Cancel</button>
        </div>
      </div>
    </div>
  </form>
</div>
</@override>

<@override name="scripts">
<link href="assets/bootstrap-wysihtml5/bootstrap-wysihtml5-0.0.2.css" rel="stylesheet" type="text/css">
<script src="assets/bootstrap-wysihtml5/lib/wysihtml5-0.3.0.min.js"></script>
<script src="assets/bootstrap-wysihtml5/bootstrap-wysihtml5-0.0.2.min.js"></script>
<script src="assets/js/ubb.js"></script>

<script type="text/javascript">
  $(document).ready(function () {
    $('#inputContent').wysihtml5({
      'font-styles': false
    });

    $('#topicContent').wysihtml5({
      'font-styles': false
    });

    var prevpage = "/discuss/${pageNumber-1}<#if 20!=pageSize>?s=${pageSize}</#if>"
    var nextpage = "/discuss/${pageNumber+1}<#if 20!=pageSize>?s=${pageSize}</#if>"
    $(document).keydown(function (event) {
        <#if (pageNumber>1)>if (event.keyCode == 37)location = prevpage;</#if>
        <#if pageNumber<topicList?size>if (event.keyCode == 39)location = nextpage;</#if>
    });

    function getProblemTitle() {
      var pid = this.value;
      if (pid >= 1000) {
        $.get("/api/problem/getField", {name: "title", pid: this.value},
                function (data) {
                  if (data.result) {
                    $("#problemTitle").html('<a href="problem/show/' + pid + '" target="_blank">' + data.result + '</a>');
                  }
                  else {
                    $("#problemTitle").html('');
                  }
                });
      }
      else {
        $("#problemTitle").html('');
      }
    }

    $("#inputProblem").change(getProblemTitle).keyup(getProblemTitle);

    $("#newThread").submit(function () {
      var $content = $('#inputContent');
      var html = $content.val();
      if (html.length < 5) {
        $('#error').html('The content length should between 5 and 30000.').show();
        setTimeout(function () {
          $('#error').hide();
        }, 10000);
        return false;
      }
      var ubb = html2ubb(html);
      $content.data("wysihtml5").editor.setValue(ubb);
      return true;
    });

    $("#newTopic").submit(function () {
      var $content = $('#topicContent');
      var html = $content.val();
      if (html.length < 5) {
        $('#topic-error').html('The content length should between 5 and 30000.').show();
        setTimeout(function () {
          $('#topic-error').hide();
        }, 10000);
        return false;
      }
      var ubb = html2ubb(html);
      $content.data("wysihtml5").editor.setValue(ubb);
      return true;
    });

    $('a.topic-title').click(function () {
      var that = $(this);
      var id = that.data("id");
      var target = $('#topicModal');

      target.modal("show");
      $.get("/api/discuss", {id: id},
              function (data) {
                if (data.topic.success) {
                  var html = parseTimestamp(data.topic.ctime)
                          + ' by <a href="user/profile/'
                          + data.topic.name + '" target="_blank">'
                          + data.topic.name + '</a>\n';
                  if (data.topic.pid) {
                    html += ' for problem <a href="problem/show/'
                            + data.topic.pid + '" title="'
                            + data.topic.problem + '" target="_blank">'
                            + data.topic.pid + '</a>\n';
                  }
                  html += '<pre>' + ubb2html(data.topic.content) + '</pre>\n';
                  var title = data.topic.title;
                  if (title.substr(0, 4) !== 'Re: ') {
                    title = 'Re: ' + title;
                  }
                  $('#topicModalLabel', target).html(data.topic.title);
                  $('#content', target).html(html).append($('.node[data-id="' + data.topic.threadId + '"]').clone(true, true));
                  $('a[data-id="' + data.topic.id + '"]', target).addClass('strong');
                  $('#topicProblem', target).val(data.topic.pid);
                  $('#topicThreadId', target).val(data.topic.threadId);
                  $('#topicParentId', target).val(data.topic.id);
                  $('#topicTitle', target).val(title);
                }
                else {
                  $('#topicModalLabel').html('Error');
                  $('#content', target).html(data.result).addClass("alert alert-error");
                }
              });
    });

    $('.topic').click(function () {
      var that = $(this);
      if (that.parent().children('ul').size()) {
        if (that.hasClass('topic-open')) {
          that.removeClass('topic-open').addClass('topic-closed');
        } else {
          that.removeClass('topic-closed').addClass('topic-open');
        }
      }
      that.parent().children("ul").toggle("slow");
    });
  });
</script>
<script type="text/javascript">
  $(document).ready(function () {
    $('.timestamp').each(function () {
      var that = $(this);
      that.html(parseTimestamp(that.attr('data')));
    });
    $('#postBtn').click(function () {
      system.callback = function () {
        $('#loginModal').modal('hide');
        $('#postModal').modal('show');
      };
    });
  });
</script>
</@override>
<@extends name="../common/_layout.html" />
